<template>
  <div id="app">

    <!-- 对tabbar标签添加route 可以开启路由模式，此时item里设置to属性可以实现跳转，同时修改url也能自动更新tabbar -->
    <!-- 先修改dom信息，然后再执行动画/过度，因此这个name是在被修改之后，才执行动画效果的 -->
<transition :name="direction" mode="out-in">
  <keep-alive include="Home,Mine"><!--这个keep-alive不会自动记住位置，但是可以记住data，你如果愿意，可以专门留一个data去记住位置
               keep-alive如果不设置include就会覆盖指定组件内的所有组件！-->
    <router-view ></router-view>
  </keep-alive>
</transition>

     <van-tabbar v-model="active" route @change="slide" placeholder>
   <van-tabbar-item icon="home-o"  to="/home">主页</van-tabbar-item>
  <van-tabbar-item icon="user-o"  to="/mine">我的</van-tabbar-item>
</van-tabbar>

  </div>
</template>
<script>
export default {
  data () {
    return {
      active: 0, // 用于指定当前active的是哪一个tab，主要作用就是处理高亮，也通过它来设置默认高亮
      // // 如果使用路由模式了，可以直接不要这个属性，不进行双向绑定
      // 但是change事件基于active的改变而触发，如果你要用到change事件，那么你就得双向绑定一下这个active
      lastIndex: -1,
      nowIndex: 0,
      direction: ''
    }
  },
  methods: {
    // logging (p) {
    //   // van-tabbar的change事件的回调参数默认是对应标签的序号，0起；
    //   // 但是如果你设置了item的name属性，那么就会返回name
    //   console.log(p)
    // }
    // changeTab (name) {
    //   this.$router.push('/' + this.active)
    // }
    slide (to) {
      // console.log('@@', to)
      // 本方法用于'根据切换的情况，设置过渡动画
      this.lastIndex = this.nowIndex
      this.nowIndex = to // 更新当前索引和上一次索引的值
      this.direction = (this.nowIndex > this.lastIndex) ? 'slide-left' : 'slide-right'
      // console.log(this.direction)
    }
  }

}
</script>

<style lang="less" scoped>
#app{
  width: 100%;
}
.slide-left-enter{// 不要把进入的初始态还在原来基础上换了换位置，那样一不符合逻辑，二会造成初始界面被无端放大，造成一些元素被撑开
  opacity: 0;
}
.slide-left-enter-to{ // to是enter或leave的最终态，enter或leave是初态，二者之间是xxxactive，active内写transition
  opacity: 1;   }      // 且一般leave不写初始态，enter的初始和终末都要写，因为离开者的初态就是当下，没什么改变的必要
.slide-right-enter{
  opacity: 0;
}
.slide-right-enter-to{
  opacity: 1;
}

.slide-left-leave-to{
  transform: translateX(-100%);
  opacity: 0;
}

.slide-right-leave-to{
  transform: translateX(100%);
   opacity: 0;
}

.slide-left-enter-active,.slide-left-leave-active{
  transition: all 10s;
}
.slide-right-enter-active,.slide-right-leave-active{
  transition: all 10s;
}
// 你如果采用的是动画来实现，那么就不需要xx xx-to这种类了，直接一组enter/leave-active类配合动画就能实现效果
// 若采用第三方动画，则需要在transition标签内定义属性，设置enter/leave-active类的类名
</style>
